$(function () {
  //  第一步  根据接口文档 发送ajax  获取左边分类的数据

  $.ajax({
    url: "/category/queryTopCategory",
    type: "get",
    success: function (res1) {
      // console.log(res1)

      //  template('id','obj')
      var leftHtml = template("leftTmp", res1);

      console.log(leftHtml);
      $(".leftBox").html(leftHtml);

      console.log($(".leftBox").find("a").eq(0));

      $(".leftBox").find("a").eq(0).addClass("mui-active");

      //获取二级分类的数据  要根据一级分类的id 去发送请求
      // 第一步获取一级分类的id
      var firstId = $(".leftBox").find("a").eq(0).attr("cateId");
      console.log(firstId);
      $.ajax({
        url: "/category/querySecondCategory",
        type: "get",
        data: {
          id: firstId,
        },
        success: function (res2) {
          console.log(res2);

          var rightHtml = template("rightTmp", res2);
          console.log(rightHtml);

          $(".rightBox").html(rightHtml);
        },
      });
    },
  });

//  点击左边的a 绑定点击事件  a 是动态生成的   所以需要事件代理或者事件委托
//  移动端的点击事件   用 tap 
 $('.leftBox')  .on('tap','a',function() {

  var  id=$(this).attr('cateId')
  $.ajax({
    url: "/category/querySecondCategory",
    type: "get",
    data: {
      id: id,
    },
    success: function (res2) {
      console.log(res2);

      var rightHtml = template("rightTmp", res2);
      console.log(rightHtml);

      $(".rightBox").html(rightHtml);


    },
  });

  $(this).addClass("mui-active").siblings('a').removeClass("mui-active");



})




});
